<template>
  <!-- 使用 class="app" 代替 id="app" -->
  <div class="app">
    <div class="name" v-if="messageVisible">
      <p v-if="person.gender">
        <span class="personName">{{ formattedName }}</span><br>
        <span class="welcome">欢迎您</span>
      </p>
      <p v-else>
        <span class="noIn">不在参会名单中</span>
      </p>
    </div>

    <div class="nowTime" v-else>
      <p>
        <span class="time">{{ currentTime }}</span>
      </p>
      <p>
        <span class="date">{{ currentDate }}</span>
      </p>
    </div>
  </div>
</template>

<script>
// 使用 axios 发起请求
import axios from 'axios';

axios.defaults.baseURL = "http://127.0.0.1:8111";

export default {
  name: "WelcomePage",
  data() {
    return {
      person: null, // 存储从后端获取的 Person
      messageVisible: false, // 控制显示“欢迎你 xxx”
      currentDate: '', // 当前日期
      currentTime: '', // 当前时间
      interval: null, // 用来存储定时器
      messageTimeout: null, // 用来记录是否强制显示消息两秒
    };
  },
  mounted() {
    // 用户第一次点击页面时，解锁 AudioContext
    document.addEventListener("click", () => {
      const context = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = context.createOscillator();
      oscillator.connect(context.destination);
      oscillator.start();
      oscillator.stop(context.currentTime + 0.01); // 极短时间播放一下解锁
    }, { once: true });

    // 每0.5秒发起一次请求
    this.interval = setInterval(this.checkQueue, 500);

    // 设置每秒更新时间
    setInterval(() => {
      const now = new Date();
      this.currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
      this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;

    }, 500);
  },
  beforeDestroy() {
    // 清理定时器
    if (this.interval) {
      clearInterval(this.interval);
    }

    if (this.messageTimeout) {
      clearTimeout(this.messageTimeout);
    }
  },
  computed: {
// 计算姓名显示，确保至少三位，不满三位在中间补空格
    formattedName() {
      if (this.person && this.person.name.length === 2) {
        return this.person.name[0] + ' ' + this.person.name[1];
      }
      return this.person ? this.person.name : '';
    }


  },
  methods: {
    async checkQueue() {
      try {
        const response = await axios.get("/api/person/dequeue");
        const data = response.data;

        if (data.empty) {
          // 如果队列为空，不改变显示状态
          return;
        } else {
          // 如果队列不为空，显示欢迎信息
          this.person = data.person;
          this.messageVisible = true;

          // 强制显示欢迎信息两秒
          if (this.messageTimeout) {
            clearTimeout(this.messageTimeout);
          }
          if (!this.person.gender) {
            this.playBeep(); // 播放提示音
          }

          this.messageTimeout = setTimeout(() => {
            this.messageVisible = false;
          }, 2000);
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    },
    playBeep() {
      const context = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = context.createOscillator(); // 创建振荡器节点
      const gainNode = context.createGain();         // 创建音量节点

      oscillator.type = "sine";        // 波形类型: sine, square, triangle, sawtooth
      oscillator.frequency.setValueAtTime(800, context.currentTime); // 频率（Hz）

      gainNode.gain.setValueAtTime(0.1, context.currentTime); // 音量

      oscillator.connect(gainNode);
      gainNode.connect(context.destination); // 输出到扬声器

      oscillator.start();                    // 开始播放
      oscillator.stop(context.currentTime + 0.3); // 播放0.3秒
    }
  }
};
</script>

<style>
/* 修改为 .app，避免使用 id */
.app {
  text-align: center;
  font-family: Arial, sans-serif;
  margin-top: 0; /* 去除顶部的 margin */
  background-image: url('@/assets/images/background.jpg');
  background-size: 100% auto; /* 图片宽度自适应屏幕 */
  background-position: top center; /* 背景图居中 */
  background-repeat: no-repeat;
  background-attachment: fixed; /* 背景固定 */
  height: 100vh; /* 确保页面高度覆盖整个视窗 */
  color: #fff;

  /* 使页面固定在顶部并禁止滚动 */
  position: fixed; /* 固定位置 */
  top: 0; /* 页面顶部 */
  left: 0; /* 页面左侧 */
  width: 100%; /* 页面宽度占满屏幕 */
  overflow: hidden; /* 禁止页面滚动 */
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 禁止滚动 */
}

/* 使用 grid 布局确保垂直排列 */
/* 使 nowTime 垂直居中 */
.nowTime {
  position: absolute;
  top: 50%; /* 居中显示 */
  left: 50%;
  transform: translate(-50%, -50%); /* 真正居中 */
  display: flex; /* 使用 flexbox */
  flex-direction: column; /* 改为垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}
.name {
  position: absolute;
  top: 53%; /* 居中显示 */
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -50%); /* 真正居中 */
  display: flex; /* 使用 flexbox */
  flex-direction: column; /* 改为垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}
.name p {
  position: relative;  /* 让 p 成为参照物 */
  width: 100vw;
  font-size: 20px;
  color: #333;
}

/* 欢迎姓名样式 */
.personName {
  position: absolute;
  top: -20vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15vw;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 2vw;
}


/* 欢迎文字样式 */
.welcome {
  position: absolute;
  top: 10vw; /* 相对 personName 稍微靠下 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 9vw;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2vw;
}


.noIn {
  position: absolute;
  width: 60vw;
  font-size: 15vw;
  top: -15vw;
  left: 20%;
  color: #fff;
}


/* 年月日样式 */
.date {
  position: absolute;
  display: flex;
  left: 24%;
  font-size: 5vw;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1.5px; /* 调整字间距 */
}

/* 时分秒样式 */
.time {
  font-size: 15vw;
  color: #fff;
  font-weight: normal;
  letter-spacing: 3px; /* 调整字间距 */
}



</style>
